<template>
  <div class="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/insert">Insert</router-link>
      <router-link to="/update">Update</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script lang="ts">
export default {
  name: 'App'
}
</script>

<style scoped>
.app {
  background-color: rgb(210, 235, 235);
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  min-height: 100vh;
  height: 100%;
}

nav {
  margin-bottom: 20px;
}

nav a {
  margin-right: 10px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

nav a:hover {
  background-color: #0056b3;
}
</style>
